<template>
	<div class="monitoring-box">
		<navBread />

		<section class="search-box">
			<div class="m-title">舆情总览</div>
			<div class="slider-box">
				<img src="../../assets/img/searchtiao.png" alt="" />
			</div>
			<div class="sjd-box">
				<div class="title">
					<img src="../../assets/img/sjd.png" alt="" />
					<span style="margin-left: 10px">时间段：</span>
				</div>
				<div class="sjd">
					<span class="sjdwz" :class="{ active: yearIndex == index }" v-for="(item, index) in yearList" :key="index" @click="handleYear(item, index)">
						{{ item }}
					</span>
				</div>
			</div>

			<div class="sjd-box">
				<div class="title">
					<img src="../../assets/img/jjr.png" alt="" />
					<span style="margin-left: 10px">节假日：</span>
				</div>
				<div class="sjd">
					<span
						class="sjdwz"
						:class="{ active: holidayIndex == index }"
						v-for="(item, index) in holidayList"
						:key="index"
						@click="handleHoliday(item, index)"
					>
						{{ item }}
					</span>
				</div>
				<el-button style="float: right" type="primary" @click="">查询</el-button>
			</div>
		</section>

		<section class="heat-map-box">
			<div class="left1">
				<div class="m-title">景区热力图</div>

				<div class="mapimg">
					<!-- <img src="../../assets/img/relitu.png" alt="" style="width: 100%; height: 100%" /> -->
					<div class="map-container" id="containerT" style="border-radius: 40px"></div>
				</div>

				<div class="map-type" style="z-index: 99999">
					<div
						class="map-type-btn"
						v-for="(item, index) in mapTypeList"
						:key="item.id"
						@click="handleIndex(item, index)"
						:class="{ active: activeIndex == index }"
					>
						<img :src="activeIndex == index ? item.img : item.img1" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>
				<div class="map-type1" style="z-index: 999999">
					<div @click="home">
						<img src="../../assets/img/dingwe.png" alt="" />
					</div>
					<div @click="zoomIn">
						<img src="../../assets/img/jia.png" alt="" />
					</div>
					<div @click="zoomOut">
						<img src="../../assets/img/jian.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right1">
				<div class="jdry-box">
					<div>
						<div class="title">累计接待人员</div>
						<div style="margin-top: 5px">
							<span class="num">4</span>
							<span class="num">4</span>
							<span class="num">1</span>
							<span class="unit">万人次</span>
						</div>
					</div>
					<div>
						<img src="../../assets/img/jdry.png" alt="" />
					</div>
				</div>
				<div class="jdry-box" style="margin-top: 10px">
					<div>
						<div class="title">平均接待人员</div>
						<div style="margin-top: 5px">
							<span class="num">4</span>
							<span class="num">4</span>
							<span class="num">1</span>
							<span class="unit">万人次</span>
						</div>
					</div>
					<div>
						<img src="../../assets/img/jdry.png" alt="" />
					</div>
				</div>

				<div class="jdry-box" style="margin-top: 10px">
					<div>
						<div class="title2">累计消费</div>
						<div style="margin-top: 5px">
							<span class="num2">4</span>
							<span class="num2">4</span>
							<span class="num2">1</span>
							<span class="unit">万元</span>
						</div>
					</div>
					<div>
						<img src="../../assets/img/ljxf.png" alt="" />
					</div>
				</div>

				<div class="jdry-box" style="margin-top: 10px">
					<div>
						<div class="title2">人均消费</div>
						<div style="margin-top: 5px">
							<span class="num2">4</span>
							<span class="num2">4</span>
							<span class="num2">1</span>
							<span class="unit">万元</span>
						</div>
					</div>
					<div>
						<img src="../../assets/img/ljxf.png" alt="" />
					</div>
				</div>
			</div>
		</section>

		<!-- 接待人数 -->
		<section class="reception-box">
			<div class="m-title">接待人数</div>
			<div class="reception-content">
				<div class="left3">
					<div id="chart1" ref="chart1" class="chart1"></div>
					<ul class="snxr-box">
						<li class="item-box">
							<div class="flow-header">
								<div class="title-box">
									<span class="title">省份</span>
								</div>
								<div class="line"></div>
							</div>
							<div id="chart2" ref="chart2" class="chart2"></div>
						</li>
						<li class="item-box">
							<div class="flow-header">
								<div class="title-box">
									<span class="title">年龄</span>
								</div>
								<div class="line"></div>
							</div>
							<div id="chart3" ref="chart3" class="chart2"></div>
						</li>
						<li class="item-box">
							<div class="flow-header">
								<div class="title-box">
									<span class="title">信源</span>
								</div>
								<div class="line"></div>
							</div>
							<div id="chart4" ref="chart4" class="chart2"></div>
						</li>
						<li class="item-box">
							<div class="flow-header">
								<div class="title-box">
									<span class="title">人流</span>
								</div>
								<div class="line"></div>
							</div>
							<div id="chart5" ref="chart5" class="chart2"></div>
						</li>
					</ul>
				</div>
				<div class="right3">
					<div class="item-box">
						<span class="title">累计接待</span>
						<span class="name">106人</span>
					</div>
					<div class="item-box">
						<span class="title">来源最多的省份</span>
						<span class="name">江苏省</span>
					</div>
					<div class="item-box">
						<span class="name" style="margin-left: 0px">3月、5月、10月</span>
						<span class="title" style="margin-left: 16px">是人流最多月份</span>
					</div>

					<div class="item-box" style="margin-bottom: 20px">
						<span class="name" style="margin-left: 0px">2019</span>
						<span class="title" style="margin-left: 16px">是目前接待人数最多的年度</span>
					</div>
					<div class="item-box">
						<span class="title">达到了</span>
						<span class="name">5678000人</span>
					</div>
				</div>
			</div>
		</section>

		<!-- 热门景点 -->
		<section class="popular-box">
			<div class="m-title">热门景点</div>

			<ul class="popular-content">
				<li class="jd-item jd-item1">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">热门景区概述</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div class="jdgs-item-box" style="margin-bottom: 10px">
							<span class="jdgs-name" style="margin-left: 0; margin-right: 10px">xx景</span>
							<span class="jdgs-title">是目前最为热门的</span>
						</div>
						<div class="jdgs-item-box" style="margin-bottom: 10px">
							<span class="jdgs-title">观赏景点, 每</span>
							<span class="jdgs-name" style="margin-left: 10px; margin-right: 10px">十个</span>
							<span class="jdgs-title">游客中就有</span>
						</div>

						<div class="jdgs-item-box" style="margin-bottom: 10px">
							<span class="jdgs-name" style="margin-left: 0">六个</span>
							<span class="jdgs-title">游客会去该景点。</span>
						</div>

						<div class="jdgs-item-box" style="margin-bottom: 10px">
							<span class="jdgs-title">而</span>
							<span class="jdgs-name" style="margin-left: 10px; margin-right: 10px">xx景点</span>
							<span class="jdgs-title">相对客流量较小,</span>
						</div>
						<div class="jdgs-item-box" style="margin-bottom: 10px">
							<span class="jdgs-title">需要适当加强推广</span>
						</div>
					</div>
				</li>
				<li class="jd-item jd-item2">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">景点接待</span>
						</div>
						<div class="line"></div>
					</div>
					<div id="chart6" ref="chart6" class="chart6"></div>
				</li>
				<li class="jd-item jd-item3">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">景点消费</span>
						</div>
						<div class="line"></div>
					</div>
					<div id="chart7" ref="chart7" class="chart6"></div>
				</li>
				<li class="jd-item jd-item4">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">景点消费概述</span>
						</div>
						<div class="line"></div>
					</div>

					<div class="jdgs-box">
						<div class="jdgs-item-box">
							<span class="jdgs-name" style="margin-left: 0; margin-right: 10px">xx景</span>
							<span class="jdgs-title">区总消费额达到了</span>
							<span class="jdgs-name">900万元</span>
						</div>

						<div class="jdgs-item-box">
							<span class="jdgs-title">人均消费</span>
							<span class="jdgs-name">900</span>
							<span class="jdgs-title">元</span>
						</div>
						<div class="jdgs-item-box">
							<span class="jdgs-title">其他景区的销售额也均</span>
							<span class="jdgs-name">稳步增长</span>
						</div>
					</div>
				</li>
			</ul>
		</section>

		<!-- 热门线路 -->
		<section class="route-box">
			<div class="m-title">热门线路</div>
			<ul class="route-content">
				<li class="route-item route1">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">路线排名</span>
						</div>
						<div class="line"></div>
					</div>
					<div id="chart8" ref="chart8" class="chart8"></div>
				</li>
				<li class="route-item route2">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">路径流程</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="xllc-box">
						<img class="lcimg" src="../../assets/img/xllc.png" alt="" />

						<div class="xl-item" style="left: 50px; top: 5px">
							<img src="../../assets/img/lctp1.png" alt="" />
							<div>
								<p class="time">08:00</p>
								<p class="name">XXXXXXX</p>
							</div>
						</div>

						<div class="xl-item" style="left: 300px; top: 5px">
							<img src="../../assets/img/lctp1.png" alt="" />
							<div>
								<p class="time">10:00</p>
								<p class="name">XXXXXXX</p>
							</div>
						</div>

						<div class="xl-item" style="left: 160px; top: 130px">
							<img src="../../assets/img/lctp1.png" alt="" />
							<div>
								<p class="time">15:00</p>
								<p class="name">XXXXXXX</p>
							</div>
						</div>

						<div class="xl-item" style="left: 460px; top: 130px">
							<img src="../../assets/img/lctp1.png" alt="" />
							<div>
								<p class="time">11:30</p>
								<p class="name">XXXXXXX</p>
							</div>
						</div>

						<div class="xl-item" style="left: 273px; top: 255px">
							<img src="../../assets/img/lctp1.png" alt="" />
							<div>
								<p class="time">17:00</p>
								<p class="name">XXXXXXX</p>
							</div>
						</div>
					</div>
				</li>
				<li class="route-item route3">
					<div class="ljgl-item">
						<span class="title">累计公里：</span>
						<span class="num">6.5公里</span>
					</div>
					<div class="ljgl-item">
						<span class="title">平均时长：</span>
						<span class="num">3小时</span>
					</div>
					<div class="ljgl-item">
						<span class="title">行走次数：</span>
						<span class="num">15000步</span>
					</div>
					<div class="ljgl-item">
						<span class="title">日均次数：</span>
						<span class="num">2次</span>
					</div>
				</li>
			</ul>
		</section>

		<section class="complaint-box">
			<div class="left2">
				<div class="m-title">线上投诉</div>
				<ul class="left-content">
					<li class="left4">
						<div class="left4-item">
							<div id="chart9" ref="chart9" class="chart9"></div>
							<div class="l4-text">
								<p class="l4-p">
									<span class="title">处理案件总数：</span>
									<span class="num">300</span>
									<span class="unit">件</span>
								</p>
								<p class="l4-p">
									<span class="title">超时未处理数：</span>
									<span class="num num2">15</span>
									<span class="unit">件</span>
								</p>
								<p class="l4-p">
									<span class="title">平均处理时效：</span>
									<span class="num">3</span>
									<span class="unit">小时/件</span>
								</p>
							</div>
						</div>
						<div class="left4-item">
							<div id="chart10" ref="chart10" class="chart9"></div>
							<div class="l4-text">
								<p class="l4-p">
									<span class="title">投诉处理满意度：</span>
									<span class="num">98%</span>
								</p>
							</div>
						</div>
					</li>
					<li class="right4">
						<div class="flow-header">
							<div class="title-box">
								<span class="title">最新投诉情况</span>
							</div>
							<div class="line"></div>
						</div>

						<table class="ts-table" align="center" width="400" cellspacing="0">
							<thead>
								<tr class="head-tr">
									<th>投诉类型</th>
									<th>标题</th>
									<th>详情</th>
								</tr>
							</thead>
							<tbody>
								<!-- 第1行 -->
								<tr class="con-tr">
									<td class="tslx">
										<img src="../../assets/img/zp1.png" alt="" />
										<span>服务质量</span>
									</td>
									<td>工作人员服务态度</td>

									<td>更多</td>
								</tr>
								<!-- 第2行 -->
								<tr class="con-tr">
									<td class="tslx tslx2">
										<img src="../../assets/img/zp2.png" alt="" />
										<span>服务产品</span>
									</td>
									<td>服务产品信息不对等</td>

									<td>更多</td>
								</tr>

								<tr class="con-tr">
									<td class="tslx">
										<img src="../../assets/img/zp1.png" alt="" />
										<span>服务质量</span>
									</td>
									<td>工作人员服务态度</td>

									<td>更多</td>
								</tr>
								<tr class="con-tr">
									<td class="tslx">
										<img src="../../assets/img/zp1.png" alt="" />
										<span>服务质量</span>
									</td>
									<td>工作人员服务态度</td>

									<td>更多</td>
								</tr>
							</tbody>
						</table>
					</li>
				</ul>
			</div>
			<div class="right2">
				<div class="m-title">舆情排行</div>
				<div class="yq-content">
					<div class="yq-left">
						<div class="flow-header">
							<div class="title-box">
								<span class="title">最新舆情排行</span>
							</div>
							<div class="line"></div>
						</div>

						<div class="yqtb-box">
							<div style="flex: 1">
								<div id="chart11" ref="chart11" class="chart11"></div>
								<p class="title">微博</p>
							</div>
							<div style="flex: 1">
								<div id="chart12" ref="chart12" class="chart11"></div>
								<p class="title">微博</p>
							</div>
							<div style="flex: 1">
								<div id="chart13" ref="chart13" class="chart11"></div>
								<p class="title">微博</p>
							</div>
						</div>
					</div>
					<div class="yq-right">
						<div class="flow-header">
							<div class="title-box">
								<span class="title">最新投诉情况</span>
							</div>
							<div class="line"></div>
						</div>

						<div class="tsqk-box" id="chart14" ref="chart14"></div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import navBread from '@/components/navBread.vue';

import 'ol/ol.css';
import { Map, View } from 'ol'; //地图,视图
import { defaults as defaultControls } from 'ol/control'; // 引入默认控件集合
import Zoom from 'ol/control/Zoom';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile'; //可以理解为图层
export default {
	components: {
		navBread,
	},
	data() {
		return {
			yearList: ['近五年', '近三年', '上一年', '近一年'],
			yearIndex: 0,
			holidayList: ['春节', '元宵节', '清明节', '端午节', '中秋节', '国庆节', '劳动节', '教师节', '元旦'],
			holidayIndex: 0,
			mapTypeList: [
				{ id: 1, name: '热力', img: require('../../assets/img/jc1.png'), img1: require('../../assets/img/jc2.png') },
				{ id: 2, name: '路径', img: require('../../assets/img/jc3.png'), img1: require('../../assets/img/jc4.png') },
				{ id: 3, name: '设备', img: require('../../assets/img/jc5.png'), img1: require('../../assets/img/jc6.png') },
				{ id: 4, name: '设施', img: require('../../assets/img/jc7.png'), img1: require('../../assets/img/jc8.png') },
			],
			activeIndex: 0,
			map: null,
		};
	},

	mounted() {
		this.createMap();
		this.getChart1();
		this.getChart2();
		this.getChart3();
		this.getChart4();
		this.getChart5();
		this.getChart6();
		this.getChart7();
		this.getChart8();
		this.getChart9();
		this.getChart10();
		this.getChart11();
		this.getChart12();
		this.getChart13();
		this.getChart14();
	},

	methods: {
		zoomIn() {
			if (this.tMap) {
				this.tMap.zoomIn(); // 每次放大一级
			}
		},
		zoomOut() {
			if (this.tMap) {
				this.tMap.zoomOut(); // 每次缩小一级
			}
		},
		home() {
			this.createMap();
		},

		// 创建地图
		createMap() {
			const T = window.T;
			// 3.初始化地图对象
			this.tMap = new T.Map('containerT', {});
			// 4.设置显示地图的中心点和级别
			this.tMap.centerAndZoom(new T.LngLat(110.145386,20.283644), 13);
			// 5.创建地图类型控件
			const ctrl = new T.Control.MapType([
				{
					title: '地图',
					icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
					layer: window.TMAP_NORMAL_MAP,
				},
				// {
				// 	title: '卫星',
				// 	icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
				// 	layer: window.TMAP_SATELLITE_MAP,
				// },
			]);
			// 随机向地图添加25个标注
			var bounds = this.tMap.getBounds();
			var sw = bounds.getSouthWest();
			var ne = bounds.getNorthEast();
			var lngSpan = Math.abs(sw.lng - ne.lng);
			var latSpan = Math.abs(ne.lat - sw.lat);
			for (var i = 0; i < 10; i++) {
				var point = new T.LngLat(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
				var marker = new T.Marker(point); // 创建标注
				this.tMap.addOverLay(marker);
			}
			this.tMap.checkResize();
		},

		handleYear(item, index) {
			this.yearIndex = index;
		},
		handleHoliday(item, index) {
			this.holidayIndex = index;
		},
		handleIndex(item, index) {
			this.activeIndex = index;
			this.createMap();
		},

		getChart1() {
			const myChart = echarts.init(this.$refs.chart1);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
				},
				grid: {
					show: false,
					left: '3%',
					top: '15%',
					right: '5%',
					bottom: '6%',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					axisLabel: {
						textStyle: {
							color: '#666666',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#E5E5E5',
						},
					},
				},
				yAxis: [
					{
						name: '万/人次',
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#666666',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#E5E5E5',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
							},
						},
						barWidth: '24',
						data: [10, 52, 200, 334, 390, 330],
					},

					{
						name: '',
						type: 'line',
						yAxisIndex: 0,
						itemStyle: {
							normal: {
								color: '#244A8B', //改变折线点的颜色
								lineStyle: {
									color: '#244A8B', //改变折线颜色
								},
							},
						},
						tooltip: {
							valueFormatter: function (value) {
								return value + ' °C';
							},
						},
						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart2() {
			const myChart = echarts.init(this.$refs.chart2);
			const option = {
				title: {
					show: true,
					text: '152',
					subtext: '万人次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['rgb(50, 65, 87)', '#5E5CBA', '#D9726B', '#FEAD54', '#5DE2C1'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '江苏省' },
							{ value: 3, name: '广东省' },
							{ value: 3, name: '其他省份' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart3() {
			const myChart = echarts.init(this.$refs.chart3);
			const option = {
				title: {
					show: true,
					text: '年龄分布',
					textStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 400,
					},
					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '59%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#5DE2C1', 'rgb(50, 65, 87)', '#FEAD54', '#D9726B'],
				series: [
					{
						name: '年龄分布',
						type: 'pie',
						radius: ['40%', '65%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' \n ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: '20-35岁' },
							{ value: 735, name: '35-40岁' },
							{ value: 580, name: '50-85岁' },
							{ value: 484, name: '其他' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart4() {
			const myChart = echarts.init(this.$refs.chart4);
			const option = {
				title: {
					show: true,
					text: '152',
					subtext: '万人次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['rgb(50, 65, 87)', '#5E5CBA', '#D9726B', '#FEAD54', '#5DE2C1'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: 'OTA' },
							{ value: 3, name: '线上订票' },
							{ value: 3, name: '旅行社' },
							{ value: 30, name: '散客' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart5() {
			const myChart = echarts.init(this.$refs.chart5);
			const option = {
				title: {
					show: true,
					text: '4598万人次',
					textStyle: {
						fontSize: 14,
						color: '#666666',
						fontWeight: 400,
					},
					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '59%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#5DE2C1', 'rgb(50, 65, 87)', '#FEAD54', '#D9726B', '#5E5CBA'],
				series: [
					{
						name: '人流',
						type: 'pie',
						radius: ['40%', '65%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' \n ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: 'xx1' },
							{ value: 735, name: 'xx2' },
							{ value: 580, name: 'xx3' },
							{ value: 484, name: 'xx4' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart6() {
			const myChart = echarts.init(this.$refs.chart6);
			const option = {
				title: {
					show: true,
					text: '门票',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '45%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['rgb(50, 65, 87)', '#5E5CBA', '#D9726B', '#FEAD54', '#5DE2C1'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: 'xxxx1' },
							{ value: 3, name: 'xxxx2' },
							{ value: 3, name: 'xxxx3' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart7() {
			const myChart = echarts.init(this.$refs.chart7);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: [''],
				},
				grid: {
					show: false,
					left: '8%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: '#335B7E',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						name: '',
						type: 'category',
						data: ['xxx1', 'xxx2', 'xxx3', 'xxx4', 'xxx5', 'xxx6'],
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#FEAD54',
								borderRadius: [8, 8, 8, 8],
							},
						},
						showBackground: true,
						backgroundStyle: {
							color: '#E8F1F7',
						},
						barWidth: '16',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart8() {
			const myChart = echarts.init(this.$refs.chart8);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: [''],
				},
				grid: {
					show: false,
					left: '8%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: '#335B7E',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						name: '',
						type: 'category',
						data: ['xxx1', 'xxx2', 'xxx3', 'xxx4', 'xxx5', 'xxx6'],
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
								borderRadius: [8, 8, 8, 8],
							},
						},
						showBackground: true,
						backgroundStyle: {
							color: '#E8F1F7',
						},
						barWidth: '16',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart9() {
			const myChart = echarts.init(this.$refs.chart9);
			const option = {
				title: {
					show: true,
					text: '15',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['rgb(50, 65, 87)', '#FEAD54', '#D9726B', '#FEAD54', '#5DE2C1'],
				series: [
					{
						type: 'pie',
						radius: ['55%', '75%'],
						// center: ['30%', '50%'],
						label: {
							normal: {
								show: false,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							show: false,
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '江苏省' },
							{ value: 15, name: '超时未处理数' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart10() {
			const myChart = echarts.init(this.$refs.chart10);
			const option = {
				title: {
					show: true,
					text: '90%',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5DE2C1', '#D9726B', '#FEAD54', '#5DE2C1'],
				series: [
					{
						type: 'pie',
						radius: ['55%', '75%'],
						// center: ['30%', '50%'],
						label: {
							normal: {
								show: false,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							show: false,
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 90, name: '满意度' },
							{ value: 10, name: '不满意' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart11() {
			const myChart = echarts.init(this.$refs.chart11);
			const option = {
				title: {
					show: true,
					text: '90%',
					textStyle: {
						fontSize: 27,
						color: '#FEAD54',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#FEAD54', '#FFEFDD'],
				series: [
					{
						type: 'pie',
						radius: ['55%', '75%'],
						// center: ['30%', '50%'],
						label: {
							normal: {
								show: false,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							show: false,
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 90, name: '满意度' },
							{ value: 10, name: '不满意' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart12() {
			const myChart = echarts.init(this.$refs.chart12);
			const option = {
				title: {
					show: true,
					text: '90%',
					textStyle: {
						fontSize: 27,
						color: '#FEAD54',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#FEAD54', '#FFEFDD'],
				series: [
					{
						type: 'pie',
						radius: ['55%', '75%'],
						// center: ['30%', '50%'],
						label: {
							normal: {
								show: false,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							show: false,
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 90, name: '满意度' },
							{ value: 10, name: '不满意' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart13() {
			const myChart = echarts.init(this.$refs.chart13);
			const option = {
				title: {
					show: true,
					text: '90%',
					textStyle: {
						fontSize: 27,
						color: '#FEAD54',
						fontWeight: 400,
					},

					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '37%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#FEAD54', '#FFEFDD'],
				series: [
					{
						type: 'pie',
						radius: ['55%', '75%'],
						// center: ['30%', '50%'],
						label: {
							normal: {
								show: false,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							show: false,
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 90, name: '满意度' },
							{ value: 10, name: '不满意' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart14() {
			const myChart = echarts.init(this.$refs.chart14);

			const option = {
				series: [
					{
						type: 'wordCloud',
						gridSize: 20,
						sizeRange: [12, 50],
						rotationRange: [-90, 90],
						shape: 'pentagon',

						textStyle: {
							color: function () {
								return (
									'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')'
								);
							},

							emphasis: {
								shadowBlur: 10,
								shadowColor: '#333',
							},
						},
						data: [
							{ name: '交通', value: 10000 },
							{ name: '旅游攻略', value: 6181 },
							{ name: '导游', value: 4386 },
							{ name: '住宿', value: 4055 },
							{ name: '服务', value: 2467 },
							{ name: '门票', value: 2244 },
							{ name: '拍照打卡', value: 1898 },
							{ name: '性价比', value: 14484 },
							{ name: '酒店价格与环境', value: 7112 },
							{ name: '解说', value: 6112 },
							{ name: '文创', value: 5112 },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.monitoring-box {
	padding: 20px 24px 40px 24px;
	background: #F8F8FF;

	.search-box {
		margin-top: 25px;
		height: 280px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.slider-box {
			margin-top: 25px;
			text-align: center;
		}
		.slider-box img{
			width:100%;
		}
		.sjd-box {
			margin-top: 45px;
			display: flex;
			align-items: center;
			padding: 0 15px;

			.title {
				display: flex;
				align-items: center;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: left;
				color: #333333;
			}

			.sjd {
				flex: 1;
				min-width: 0;
				text-align: left;
				.sjdwz {
					padding: 0 25px;
					font-size: 18px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					color: #333333;
					cursor: pointer;
					user-select: none;
				}
				.active {
					color: #d5665a;
				}
			}
		}
	}

	.heat-map-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		.left1 {
			flex: 1;
			min-width: 0;
			height: 584px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 0;
			position: relative;
			.m-title {
				padding-left: 20px;
				padding-bottom: 10px;
			}
			.mapimg {
				width: 100%;
				height: calc(100% - 20px);
			}
			.map-type1 {
				position: absolute;
				right: 30px;
				bottom: 10px;

				/* display: flex; */
				overflow: hidden;
				cursor: pointer;
			}
			.map-type {
				position: absolute;
				left: 20px;
				top: 80px;
				background: #ffffff;
				border: 1px solid rgb(50, 65, 87);
				box-shadow: 0px 4px 8px 0px rgba(8, 155, 171, 0.2);
				display: flex;
				border-radius: 20px;
				overflow: hidden;

				.map-type-btn {
					width: 136px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					span {
						padding-left: 9px;
						font-size: 18px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: rgb(50, 65, 87);
					}
				}
				.active {
					background: rgb(50, 65, 87);
					span {
						color: #fff;
					}
				}
			}
		}
		.right1 {
			margin-left: 25px;
			width: 508px;
			height: 584px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 40px 20px;

			.jdry-box {
				width: 100%;
				height: 120px;
				background: #F8F8FF;
				border-radius: 40px;
				display: flex;
				justify-content: space-between;
				padding: 20px 30px 20px 40px;

				.title {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #244a8b;
					text-align: left;
				}
				.title2 {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #d9726b;
					text-align: left;
				}
				.num2 {
					padding: 5px 12px;
					background: #d9726b;
					border-radius: 13px;
					font-size: 30px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					text-align: center;
					color: #ffffff;
					margin-right: 20px;
				}
				.num {
					padding: 5px 12px;
					background: #244a8b;
					border-radius: 13px;
					font-size: 30px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					text-align: center;
					color: #ffffff;
					margin-right: 20px;
				}

				.unit {
					font-size: 14px;
					font-family: SourceHanSansCN;
					font-weight: normal;
					text-align: left;
					color: #333333;
				}
			}
		}
	}

	.reception-box {
		margin-top: 25px;
		height: 660px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.reception-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: calc(100% - 30px);
			.left3 {
				flex: 1;
				min-width: 0;
				height: 100%;

				.chart1 {
					width: 100%;
					height: 320px;
				}

				.snxr-box {
					width: 100%;
					height: calc(100% - 350px);
					display: flex;
					justify-content: space-between;
					margin-top: 25px;

					.item-box {
						flex: 1;
						.chart2 {
							width: 100%;
							height: 90%;
						}
					}
				}
			}
			.right3 {
				margin-right: 30px;
				width: 482px;
				height: 517px;
				background: url('../../assets/img/ljjdbg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40px 30px;

				.item-box {
					display: flex;
					align-items: center;
					margin-bottom: 45px;
				}

				.title {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: normal;
					text-align: left;
					color: #333333;
				}
				.name {
					margin-left: 16px;
					font-size: 30px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					text-align: left;
					color: #244a8b;
				}
			}
		}
	}

	.popular-box {
		margin-top: 25px;
		height: 408px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.popular-content {
			width: 100%;
			height: calc(100% - 30px);
			display: flex;
			padding-top: 25px;

			.jd-item {
				.chart6 {
					width: 100%;
					height: 90%;
				}

				.jdgs-box {
					padding-top: 20px;
					height: calc(100% - 30px);
				}
			}

			.jd-item1 {
				width: 420px;
			}

			.jd-item2 {
				width: 370px;
			}

			.jd-item3 {
				width: 520px;
			}
			.jd-item4 {
				flex: 1;
				min-width: 0;
			}
		}
	}

	.route-box {
		margin-top: 25px;
		height: 546px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.route-content {
			height: calc(100% - 30px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.route-item {
				padding-top: 20px;
				height: 100%;
			}
			.route1 {
				flex: 1;
				min-width: 0;
				.chart8 {
					width: 100%;
					height: 90%;
				}
			}
			.route2 {
				width: 700px;

				.xllc-box {
					margin-top: 30px;
					width: calc(100% - 25px);
					height: 376px;
					background: rgba(8, 155, 171, 0.05);
					border-radius: 4px;
					position: relative;

					.lcimg {
						position: absolute;
						left: 80px;
						top: 44px;
					}

					.xl-item {
						position: absolute;
						z-index: 55;
						display: flex;
						height: 103px;

						.time {
							padding-top: 45px;
							font-size: 24px;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: left;
							color: #fead54;
						}
						.name {
							font-size: 24px;
							font-family: AdobeHeitiStd;
							font-weight: normal;
							text-align: left;
							color: #333333;
							line-height: 32px;
						}
					}
				}
			}
			.route3 {
				margin-right: 30px;
				width: 462px;
				height: 426px;
				background: url('../../assets/img/r3bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 66px 40px;

				.ljgl-item {
					display: flex;
					align-items: center;
					margin-bottom: 40px;
					.title {
						width: 50%;
						font-size: 24px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: center;
						color: #333333;
					}
					.num {
						font-size: 30px;
						font-family: MicrosoftYaHei;
						font-weight: normal;
						text-align: left;
						color: #244a8b;
					}
				}
			}
		}
	}

	.complaint-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		.left2 {
			width: calc((100% - 25px) / 2);
			height: 360px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;

			.left-content {
				height: calc(100% - 30px);
				display: flex;
				justify-content: space-between;
				padding-top: 20px;

				.left4 {
					flex: 1;
					min-width: 0;

					.left4-item {
						display: flex;
						width: 100%;
						height: calc((100% - 25px) / 2);
						align-items: center;

						.chart9 {
							width: 160px;
							height: 100%;
						}

						.l4-text {
							flex: 1;
							min-width: 0;
							text-align: left;

							.l4-p {
								.title {
									font-size: 16px;
									font-family: STXihei, STXihei-Regular;
									font-weight: 400;
									text-align: left;
									color: #333333;
								}
								.num {
									margin-left: 30px;
									font-size: 24px;
									font-family: youshe;
									font-weight: normal;
									text-align: left;
									color: rgb(50, 65, 87);
								}
								.num2 {
									color: #ff7d4a;
								}
								.unit {
									font-size: 12px;
									font-family: PingFang-SC-Regular;
									font-weight: normal;
									text-align: left;
									color: #666666;
								}
							}
						}
					}
				}
				.right4 {
					width: 392px;

					.ts-table {
						margin-top: 25px;
						// border: 1px solid #000000;
						border-collapse: collapse;
					}
					.head-tr {
						background: rgba(8, 155, 171, 0.3);
						border-radius: 4px;
						font-size: 16px;
						font-family: PingFang-SC-Medium;
						font-weight: normal;
						color: #006e7a;
						margin-bottom: 2px;
					}
					th {
						padding: 10px 12px;
						text-align: left;
						// border: 1px solid #000000;
					}

					.tslx {
						font-size: 16px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						color: #ff7d4a;
						display: flex;
						align-items: center;

						img {
							margin-right: 10px;
						}
					}

					.tslx2 {
						color: #00b6ca;
					}

					.con-tr {
						background: rgba(8, 155, 171, 0.1);
						border: 2px solid #fff;
					}

					td {
						text-align: left;
						padding: 10px 12px;
						font-size: 16px;
						font-family: PingFang-SC-Regular;
						font-weight: normal;
						color: #333333;
					}
				}
			}
		}
		.right2 {
			width: calc((100% - 25px) / 2);
			height: 360px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;

			.yq-content {
				padding-top: 20px;
				width: 100%;
				height: calc(100% - 30px);
				display: flex;
				justify-content: space-between;

				.yq-left {
					width: 50%;
					height: 100%;

					.yqtb-box {
						margin-top: 16px;
						display: flex;
						align-items: center;
						height: 85%;

						.chart11 {
							width: 100%;
							height: 150px;
						}

						.title {
							font-size: 16px;
							font-family: PingFang-SC-Regular;
							font-weight: normal;
							color: #666666;
						}
					}
				}
				.yq-right {
					width: 50%;
					height: 100%;

					.tsqk-box {
						margin-top: 16px;
						height: 85%;
						background: #F8F8FF;
						border-radius: 10px;
					}
				}
			}
		}
	}
}

.m-title {
	font-size: 20px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: rgb(50, 65, 87);
}

.flow-header {
	position: relative;

	.title-box {
		text-align: left;
	}

	.title {
		font-size: 16px;
		font-family: MicrosoftYaHei;
		font-weight: normal;
		text-align: left;
		color: rgb(50, 65, 87);
		padding-bottom: 8px;
		border-bottom: 1px solid rgb(50, 65, 87);
	}

	.line {
		width: 167px;
		height: 1px;
		position: relative;
	}
	.line::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4px;
		width: 17px;
		height: 4px;
		background: rgb(50, 65, 87);
	}
}

.jdgs-item-box {
	display: flex;
	align-items: center;
	margin-bottom: 45px;
}

.jdgs-title {
	font-size: 24px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: #333333;
}
.jdgs-name {
	margin-left: 10px;
	font-size: 30px;
	font-family: MicrosoftYaHei;
	font-weight: normal;
	text-align: left;
	color: #244a8b;
}
.map-container {
	width: 100%;
	height: 100%;
}
.ol-zoom-in,
.ol-zoom-out {
	width: 24px;
	height: 24px;
}
</style>
<style>
	.tdt-left{
		left: 20px !important;
		bottom: 10px !important;
	}
</style>